import {
  View,
  Text,
  StatusBar,
  StyleSheet,
  ScrollView,
  Image,
  Pressable,
  Animated,
  ImageBackground,
  LayoutChangeEvent,
} from 'react-native'
import { SafeAreaView } from 'react-native-safe-area-context'
import useGetStatusBar from '../utils/useGetStatusBar'
import { flexCol, compose } from '../assets/style/common'
import CoverSwiperContain from '../component/goodDetail/coverSwiper'
import { useState, useRef, useMemo, useEffect } from 'react'
import { LinearGradient } from 'expo-linear-gradient'
import Price from '../component/price'
import SearchTxt from '../component/searchTxt'
import TabMenus from '../component/tabMenus/tabMenus'
import { StackProps } from '@/routes/type'
enum bannerEnum {
  index = 0,
  commentTop = 1,
  detailTop = 2,
}
export default function GoodDetail({ navigation }: StackProps<'GoodDetail'>) {
  const scrollY = useRef(new Animated.Value(0)).current
  const [barHeight] = useGetStatusBar()
  const [disableTopMenu, setDisabledTopMenu] = useState(true)
  const scrollRef = useRef<ScrollView>(null)
  const [layoutTop, setLayoutTop] = useState<{ [key: number]: number }>({
    [bannerEnum.commentTop]: 0,
    [bannerEnum.detailTop]: 0,
  })
  const bannerZindex = useMemo(
    () =>
      scrollY.interpolate({
        inputRange: [100, 110],
        outputRange: [-1, 0],
        extrapolate: 'clamp',
      }),
    [scrollY],
  )
  // 设置顶部菜单是否可以点击
  useEffect(() => {
    scrollY.addListener(({ value }) => {
      setDisabledTopMenu(value < 320 - barHeight)
    })
  }, [])
  const bannerBgmColor = useMemo(
    () =>
      scrollY.interpolate({
        inputRange: [100, 360 - barHeight],
        outputRange: [0, 1],
      }),
    [scrollY, barHeight],
  )
  const list = [
    { id: 1, source: require('../assets/images/goodDetail.jpeg') },
    { id: 2, source: require('../assets/images/goodDetail2.jpeg') },
    { id: 3, source: require('../assets/images/goodDetail3.jpeg') },
  ]
  function onBack() {
    navigation.goBack()
  }
  function onGoCart() {
    navigation.navigate('Cart')
  }
  function onGoShare() {
    navigation.navigate('ShareModel')
  }
  function onTopMenuActive(num: bannerEnum) {
    scrollRef.current?.scrollTo({ y: layoutTop[num], animated: true })
  }
  function onKeyLayout(e: LayoutChangeEvent, key: bannerEnum) {
    const top = e.nativeEvent.layout.y
    setLayoutTop(val => Object.assign({}, val, { [key]: top }))
  }
  function chooseParams() {
    navigation.navigate('GoodParams')
  }
  return (
    <View style={style.goodDetail}>
      <StatusBar barStyle="light-content" />
      <View
        style={compose(style.pageMenuWrap, {
          paddingTop: barHeight,
          height: barHeight + 40,
        })}
      >
        <View style={flexCol(style.pageMenu)}>
          <Pressable onPress={onBack} style={{ marginRight: 'auto' }}>
            <Text style={style.menuSize}>&#xe601;</Text>
          </Pressable>
          <Pressable style={style.rightMenu} onPress={onGoShare}>
            <Text style={style.menuSize}>&#xe662;</Text>
          </Pressable>
          <Pressable style={style.rightMenu} onPress={onGoCart}>
            <Text style={style.menuSize}>&#x10187;</Text>
          </Pressable>
          <Text style={style.menuSize}>&#xe9eb;</Text>
        </View>
        <Animated.View
          style={[
            style.absolute,
            {
              opacity: bannerBgmColor,
              zIndex: bannerZindex,
            },
            { height: barHeight + 84 },
          ]}
        >
          <LinearGradient
            start={{ x: 0.2, y: 0.3 }}
            end={{ x: 0.8, y: 0.7 }}
            colors={['#73d7f7', '#57aef0']}
            style={style.attributeBlock}
          >
            <View
              style={compose(style.attributeSearch, { top: barHeight + 4 })}
            >
              <SearchTxt
                showButton={false}
                placeholder="搜索宝贝"
                placeholderSwiper={false}
              />
            </View>
            <TabMenus
              isScroll={false}
              list={['宝贝', '评价', '详情']}
              initActive={0}
              disabled={disableTopMenu}
              onChange={onTopMenuActive}
            />
          </LinearGradient>
        </Animated.View>
      </View>
      <ScrollView
        ref={scrollRef}
        scrollEventThrottle={16}
        onScroll={Animated.event(
          [{ nativeEvent: { contentOffset: { y: scrollY } } }],
          { useNativeDriver: false },
        )}
        stickyHeaderIndices={[0]}
        style={style.pageScroll}
      >
        <CoverSwiperContain list={list} />
        <View style={style.container}>
          <View style={flexCol.default}>
            <Price
              style={style.price}
              textDecorationLine="line-through"
              price="29.90"
              fontWeight
              fontSize={24}
            />
            <View style={flexCol(style.priceWrap)}>
              <Text style={style.priceTip}>领券优惠</Text>
              <Price
                style={style.price}
                price="21.90"
                fontWeight
                fontSize={24}
              />
            </View>
            <Text style={style.emphasis}>领券</Text>
            <Text style={style.emphasisArrow}>&#xe643;</Text>
          </View>
          <Text style={style.goodTitle}>
            宫崎骏的夏天0基础diy数字油画手绘油彩画丙烯填充减压家居装饰画
          </Text>
          <View style={flexCol.spaceBetween}>
            <Text style={style.saleCount}>月销 500+</Text>
            <Pressable onPress={onGoShare}>
              <Text style={style.saleShareIcon}>&#xe662;</Text>
            </Pressable>
          </View>
          <View style={style.propertyWrap}>
            <View style={flexCol(style.propertyItem)}>
              <Text style={style.propIcon}>&#xe602;</Text>
              <View style={{ flex: 1 }}>
                <View style={flexCol({ marginBottom: 6 })}>
                  <Text style={style.propTxtEm}>浙江杭州</Text>
                  <Text style={style.propTxt}>快递: 免运费</Text>
                </View>
                <Text style={style.propTxt}>现货, 付款后48小时内发货</Text>
              </View>
              <Text style={style.propArrow}>&#xe643;</Text>
            </View>
            <View style={style.propLine} />
            <View style={flexCol(style.propertyItem)}>
              <Text style={style.propIcon}>&#xe638;</Text>
              <View style={{ flex: 1 }}>
                <Text style={style.propTxtEm}>更多颜色选择</Text>
              </View>
              <Text style={style.propArrow}>&#xe643;</Text>
            </View>
            <View style={style.propLine} />
            <View style={flexCol(style.propertyItem)}>
              <Text style={style.propIcon}>&#x10192;</Text>
              <View style={{ flex: 1 }}>
                <Text style={style.propTxtEm}>品牌*尺寸*颜色分类</Text>
              </View>
              <Text style={style.propArrow}>&#xe643;</Text>
            </View>
          </View>
          <View
            style={style.propertyWrap}
            onLayout={e => onKeyLayout(e, bannerEnum.commentTop)}
          >
            <View style={flexCol(style.propertyItem)}>
              <Text style={style.propTxtBold}>评价700+</Text>
              <Text style={[style.propArrow, { marginLeft: 'auto' }]}>
                &#xe643;
              </Text>
            </View>
            <View style={style.propLine} />
            <View style={style.commentContent}>
              <CommentItem />
              <CommentItem />
              <Text style={style.lookMore}>查看更多</Text>
            </View>
          </View>
        </View>
        <View
          style={style.goodIntro}
          onLayout={e => onKeyLayout(e, bannerEnum.detailTop)}
        >
          <View style={flexCol(style.goodPicWrap)}>
            <Text style={style.goodPicTit}>宝贝详情</Text>
            <View style={style.goodPicLine} />
          </View>
          <Text style={style.goodIntroTxt}>
            "0基础 DIY创意数字油画 简约现代家居装饰"
          </Text>
          <Image
            style={style.goodIntroImg}
            source={require('../assets/images/goodIntro1.jpeg')}
          />
          <Image
            style={style.goodIntroImg}
            source={require('../assets/images/goodIntro2.jpeg')}
          />
        </View>
      </ScrollView>
      <SafeAreaView
        style={style.footerView}
        edges={['bottom', 'left', 'right']}
      >
        <View style={flexCol(style.footMenuWrap)}>
          <View style={flexCol(style.footMenu)}>
            <Image
              style={style.footMenuIcon}
              source={require('../assets/images/avatar.jpg')}
            />
            <Text style={style.footMenuTxt}>店铺</Text>
          </View>
          <Pressable style={flexCol(style.footMenu)} onPress={onGoShare}>
            <Text style={style.footMenuIconFont}>&#xe662;</Text>
            <Text style={style.footMenuTxt}>转发</Text>
          </Pressable>
          <View style={flexCol(style.footMenu)}>
            <Text style={style.footMenuIconFont}>&#x10186;</Text>
            <Text style={style.footMenuTxt}>收藏</Text>
          </View>
          <LinearGradient
            colors={['#fbce6a', '#fed66f']}
            style={compose(flexCol(style.footBtn), style.leftBtn)}
            start={{ x: 0.2, y: 0.5 }}
            end={{ x: 0.8, y: 0.5 }}
          >
            <Pressable onPress={chooseParams} style={flexCol(style.footBtn)}>
              <Text style={style.footBtnTxt}>加入购物车</Text>
            </Pressable>
          </LinearGradient>
          <LinearGradient
            colors={['#73d7f7', '#57aef0']}
            style={compose(flexCol(style.footBtn), style.rightBtn)}
            start={{ x: 0.2, y: 0.5 }}
            end={{ x: 0.8, y: 0.5 }}
          >
            <Pressable style={flexCol(style.footBtn)} onPress={chooseParams}>
              <Text style={style.footBtnTxt}>立即购买</Text>
            </Pressable>
          </LinearGradient>
        </View>
      </SafeAreaView>
    </View>
  )
}
function CommentItem() {
  return (
    <View style={commentStyle.card}>
      <View style={flexCol.default}>
        <Image
          style={commentStyle.avatar}
          source={require('../assets/images/avatar.jpg')}
        />
        <Text style={commentStyle.name}>Adam-min</Text>
      </View>
      <View style={flexCol.default}>
        <View style={commentStyle.commentWrap}>
          <Text style={commentStyle.comment}>
            这是一段评论评论评论评论评论评论评论评论评论评论
          </Text>
          <Text style={commentStyle.params}>参数参数参数参数参数参数参数</Text>
        </View>
        <ImageBackground
          style={commentStyle.cover}
          source={require('../assets/images/avatar.jpg')}
        >
          <Text style={commentStyle.coverTxt}>3</Text>
        </ImageBackground>
      </View>
    </View>
  )
}
const commentStyle = StyleSheet.create({
  card: {
    marginBottom: 12,
  },
  avatar: {
    width: 24,
    height: 24,
    borderRadius: 6,
    marginRight: 6,
    backgroundColor: '#fff',
    resizeMode: 'cover',
    overflow: 'hidden',
  },
  name: {
    color: '#333333',
    fontSize: 14,
  },
  comment: {
    color: '#333333',
    fontSize: 14,
    paddingTop: 14,
    paddingBottom: 6,
  },
  params: {
    color: '#999999',
    fontSize: 14,
  },
  commentWrap: {
    flex: 1,
  },
  cover: {
    width: 58,
    height: 58,
    marginHorizontal: 12,
    backgroundColor: '#ffffff',
    borderRadius: 2,
    position: 'relative',
    overflow: 'hidden',
  },
  coverTxt: {
    fontSize: 12,
    borderRadius: 4,
    overflow: 'hidden',
    backgroundColor: '#333333aa',
    color: '#ffffff',
    width: 16,
    height: 16,
    textAlignVertical: 'center',
    textAlign: 'center',
    position: 'absolute',
    right: 0,
    bottom: 0,
  },
})
const style = StyleSheet.create({
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
  },
  goodDetail: {
    display: 'flex',
    width: '100%',
    height: '100%',
    flexDirection: 'column',
    backgroundColor: '#fff',
  },
  pageScroll: {
    flex: 1,
  },
  pageMenuWrap: {
    position: 'absolute',
    top: 0,
    zIndex: 12,
    left: 0,
    backgroundColor: '#00000022',
    width: '100%',
  },
  pageMenu: {
    height: 40,
    paddingLeft: 12,
    paddingRight: 12,
    position: 'relative',
    zIndex: 1,
  },
  menuSize: {
    fontSize: 24,
    fontFamily: 'iconfont',
    color: '#ffffff',
  },
  rightMenu: {
    marginRight: 12,
  },
  bannerImg: {
    height: 500,
  },
  container: {
    borderTopLeftRadius: 12,
    borderTopRightRadius: 12,
    backgroundColor: '#ffffff',
    width: '100%',
    padding: 12,
    marginTop: -20,
    position: 'relative',
    zIndex: 12,
  },
  priceTip: {
    color: '#ff2222',
    fontSize: 12,
  },
  priceWrap: {
    marginLeft: 8,
    borderRadius: 12,
    backgroundColor: 'rgb(251,235,241)',
    paddingHorizontal: 8,
    paddingVertical: 2,
  },
  price: {
    paddingBottom: 6,
  },
  emphasis: {
    marginLeft: 'auto',
    color: '#ff2222',
  },
  emphasisArrow: {
    fontSize: 16,
    fontFamily: 'iconfont',
    color: '#ff2222',
  },
  saleCount: {
    fontSize: 12,
    color: '#333',
  },
  saleShareIcon: {
    fontFamily: 'iconfont',
    fontSize: 16,
    color: '#666',
  },
  goodTitle: {
    marginTop: 12,
    color: '#333',
    fontSize: 16,
    fontWeight: 'bold',
    marginBottom: 12,
  },
  footMenuWrap: {
    width: '100%',
    borderTopWidth: 1,
    borderTopColor: '#f1f1f1',
    backgroundColor: '#ffffff',
    paddingHorizontal: 12,
    paddingTop: 12,
  },
  footerView: {
    marginTop: 0,
    marginBottom: 0,
    paddingTop: 0,
  },
  footShop: {
    width: 40,
    height: 40,
    borderRadius: 18,
    borderWidth: 1,
    borderColor: '#eee',
    overflow: 'hidden',
  },
  footMenu: {
    flexDirection: 'column',
    marginRight: 'auto',
    marginLeft: 'auto',
  },
  leftBtn: {
    borderTopLeftRadius: 19,
    borderBottomLeftRadius: 19,
  },
  rightBtn: {
    borderTopRightRadius: 19,
    borderBottomRightRadius: 19,
  },
  footBtn: {
    width: 120,
    height: 38,
    justifyContent: 'center',
  },
  footBtnTxt: {
    textAlign: 'center',
    color: '#fff',
    fontSize: 14,
    fontWeight: 'bold',
  },
  footMenuIcon: {
    width: 16,
    height: 16,
    marginBottom: 2,
    resizeMode: 'contain',
    borderRadius: 8,
    backgroundColor: '#999',
  },
  footMenuIconFont: {
    fontSize: 18,
    color: '#333',
    fontFamily: 'iconfont',
    marginBottom: 2,
  },
  footMenuTxt: {
    color: '#333',
    fontSize: 14,
  },
  propertyWrap: {
    marginTop: 20,
    paddingHorizontal: 12,
    backgroundColor: '#f3f3f3',
    borderRadius: 12,
  },
  propertyItem: {
    paddingVertical: 12,
  },
  propLine: {
    borderBottomColor: '#e1e1e1',
    borderBottomWidth: 1,
  },
  propIcon: {
    fontSize: 20,
    marginRight: 12,
    fontFamily: 'iconfont',
  },
  propTxtEm: {
    fontSize: 14,
    paddingRight: 6,
    color: '#333',
  },
  propTxtBold: {
    fontSize: 14,
    color: '#333',
    fontWeight: 'bold',
  },
  propTxt: {
    fontSize: 14,
    color: '#666666',
  },
  propArrow: {
    color: '#666',
    fontFamily: 'iconfont',
    fontSize: 16,
  },
  commentContent: {
    paddingVertical: 12,
  },
  lookMore: {
    paddingVertical: 8,
    fontSize: 16,
    borderRadius: 4,
    width: '100%',
    color: '#666666',
    textAlign: 'center',
    backgroundColor: '#ffffff',
  },
  attributeSearch: {
    position: 'absolute',
    width: '100%',
    left: 0,
    paddingLeft: 48,
    paddingRight: 120,
  },
  attributeBlock: {
    width: '100%',
    height: '100%',
    display: 'flex',
    flexDirection: 'row',
    alignItems: 'flex-end',
    paddingBottom: 8,
    justifyContent: 'space-around',
  },
  attribute: {
    color: '#ffffff',
    fontSize: 16,
    paddingBottom: 8,
  },
  attributeActive: {
    color: '#fed66f',
  },
  attributeRow: {
    paddingBottom: 2,
  },
  attributeTxtLine: {
    height: 2,
    width: '100%',
    backgroundColor: '#fed66f',
    borderRadius: 2,
  },
  goodPicWrap: {
    flexDirection: 'column',
    paddingVertical: 24,
  },
  goodIntro: {
    position: 'relative',
    zIndex: 100,
    backgroundColor: '#fff',
    borderTopColor: '#f1f1f1',
    borderTopWidth: 12,
  },
  goodIntroTxt: {
    color: '#333',
    fontSize: 14,
    textAlign: 'center',
    lineHeight: 20,
  },
  goodPicLine: {
    borderTopWidth: 1,
    width: 160,
    borderTopColor: '#666666',
    marginTop: -8,
  },
  goodPicTit: {
    height: 16,
    position: 'relative',
    zIndex: 1,
    textAlignVertical: 'center',
    paddingHorizontal: 12,
    color: '#666666',
    backgroundColor: '#ffffff',
    fontSize: 14,
  },
  goodIntroImg: {
    width: '100%',
    resizeMode: 'contain',
    height: 500,
  },
})
